<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore } from '@/store/user'
	import { addBanquet, getDictType } from '@/api/shop'
	import { getFutureDate } from '@/utils/common'
	
	const user = useUserStore()
	const loading = ref(false)
	const uForm = ref(null)
	const form = ref({
		startTime: getFutureDate(0, '{y}-{m}-{d}'),
		endTime: undefined,
		applyType: undefined,
		chefId: undefined,
		chefName: undefined,
		tableNum: undefined,
		addr: undefined,
		remark: undefined
	})
	const rules = ref({
		startTime: [
			{required: true, message: '请选择您办宴席的日期', trigger: ['blur', 'change']}
		],
		endTime: [
			{required: true, message: '请选择办宴结束日期', trigger: ['blur', 'change']}
		],
		applyType: [
			{type: 'number', required: true, message: '请选择办宴类型', trigger: 'change'}
		],
		chefId: [
			{required: true, message: '请选择乡厨', trigger: 'change'}
		],
		tableNum: [
			{required: true, message: '请输入办宴桌数', trigger: 'blur'}
		],
		addr: [
			{required: true, message: '请输入办宴地址', trigger: 'blur'}
		]
	})
	const startTime = getFutureDate(0, '{y}-{m}-{d}')
	const typeList = ref([])
	
	function handleType() {
		getDictType('mall_banquets').then(res => {
			typeList.value = res.result || []
		})
	}
	function startChange(e) {
		let time = e.detail.value
		form.value.startTime = time
	}
	function endChange(e) {
		let time = e.detail.value
		form.value.endTime = time
	}
	function typeChange(e) {
		let index = e.detail.value
		if(index === undefined) return
		form.value.applyType = index
		uForm.value.validateField('applyType')
	}
	function kitchenChange() {
		let params = `?type=select&chefId=${form.value.chefId}`
		uni.navigateTo({
			url: '/pages/shop/kitchenRecom'  + params,
			events: {
				selectKitchen: (data) => {
					form.value.chefId = data.chefId
					form.value.chefName = data.chefName
				}
			}
		})
	}
	function chooseAddress() {
		uni.chooseLocation({
			success: (res) => {
				form.value.addr = res.address
			}
		})
	}
	function addInfo() {
		uni.navigateTo({url: '/pages/shop/banquetAddInfo'})
	}
	function submit() {
		uForm.value.validate().then(() => {
			loading.value = true
			let params = uni.$uv.deepClone(form.value)
			params.applyType = typeList.value[form.value.applyType].value
			addBanquet(params).then(res => {
				loading.value = false
				uni.redirectTo({url: '/pages/shop/banquetAddSuccess'})
			}).catch(() => loading.value = false)
		})
	}
	
	onLoad(() => {
		handleType()
	})
</script>

<template>
	<view class="app-container">
		<image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-25/1750816918488_bg.png"
			class="bg-image" mode="widthFix" />
		<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="auto" labelPosition="top">
			<view class="form-box">
				<uv-form-item label="您办宴席的日期" prop="startTime" required>
					<picker @change="startChange" mode="date" :start="startTime" :end="form.endTime" :value="form.startTime">
						<view class="custom-content">
							<text :class="form.startTime? '' : 'text-no'">{{form.startTime? form.startTime : '请选择您办宴席的日期'}}</text>
							<uv-icon name="arrow-right" color="#ADB0BD" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="办宴结束日期" prop="endTime" required>
					<picker @change="endChange" mode="date" :start="form.startTime" :value="form.endTime">
						<view class="custom-content">
							<text :class="form.endTime? '' : 'text-no'">{{form.endTime? form.endTime : '请选择办宴结束日期'}}</text>
							<uv-icon name="arrow-right" color="#ADB0BD" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="办宴类型" prop="applyType" required>
					<picker @change="typeChange" :value="form.applyType" :range="typeList" range-key="dictLabel">
						<view class="custom-content">
							<text :class="form.applyType === undefined? 'text-no' : ''">
								{{form.applyType === undefined? '请选择办宴类型' : typeList[form.applyType].dictLabel}}
							</text>
							<uv-icon name="arrow-right" color="#ADB0BD" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="选择乡厨" prop="chefId" required>
					<view class="custom-content" @click="kitchenChange">
						<text :class="form.chefId? '' : 'text-no'">{{form.chefId? form.chefName : '请选择乡厨'}}</text>
						<uv-icon name="arrow-right" color="#ADB0BD" size="30" />
					</view>
				</uv-form-item>
				<uv-form-item label="办宴需求" prop="tableNum" required>
					<view class="custom-content">
						<uv-input type="number" v-model="form.tableNum" placeholder="请输入累计办宴桌数" placeholder-style="color: #999999" border="none" maxlength="32"
							clearable>
							<template v-slot:suffix>
								<text class="text-table">桌</text>
							</template>
						</uv-input>
					</view>
				</uv-form-item>
				<uv-form-item prop="addr" :custom-style="{marginTop: '-20px'}">
					<view class="custom-content">
						<uv-input type="text" v-model="form.addr" placeholder="请输入办宴地址" placeholder-style="color: #999999" border="none" maxlength="120" 
							clearable>
							<template v-slot:suffix>
								<uv-icon name="map-fill" color="#FC4C11" size="42" @click="chooseAddress" />
							</template>
						</uv-input>
					</view>
				</uv-form-item>
				<uv-form-item label="备注信息" prop="remark">
					<view class="top-box">
						<uv-textarea v-model="form.remark" placeholder="请填写预约备注" placeholder-style="color: #999999" count border="none" height="200" 
							:custom-style="{background: '#F8F8F8', padding: '24rpx'}"></uv-textarea>
					</view>
				</uv-form-item>
				<view class="info-box" v-if="user.permissions.includes('system:feast:info') || user.permissions.includes('*:*:*')">
					<text class="text-primary" @click="addInfo">信息获取</text>
				</view>
			</view>
		</uv-form>
		<view class="app-bottom">
			<uv-button color="linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%)" shape="circle" text="提交" @click="submit" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		background: linear-gradient( 180deg, #FDD597 0%, #FFFFFF 100%);
		.bg-image{
			width: 100%;
		}
		.form-box{
			position: relative;
			top: -180rpx;
			z-index: 1;
			margin: 0 24rpx;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 32rpx;
			.custom-content{
				margin-top: 14rpx;
				padding: 24rpx;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				gap: 10rpx;
				background-color: #F8F8F8;
			}
			.text-disable{
				color: #c0c4cc;
			}
			.text-no{
				color: #999999;
			}
			.text-table{
				color: #1D2129;
				font-weight: 600;
			}
			.top-box{
				margin-top: 14rpx;
			}
			.info-box{
				font-size: var(--theme-lg);
				display: flex;
				flex-direction: row-reverse;
				.text-primary{
					color: #F92E1D;
				}
			}
			::v-deep .uv-form-item__body__left__content__required{
				position: static;
			}
			::v-deep .uv-form-item__body__left__content__label {
				font-size: var(--theme-lg);
				font-weight: 600;
			}
			::v-deep .uv-input__content__field-wrapper__field {
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			::v-deep .uv-textarea__field {
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			::v-deep .uv-form-item__body__right__message{
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
			}
			::v-deep .uv-form-item__body__right__content{
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 10;
			height: 120rpx;
			padding: 16rpx 24rpx;
			background-color: #FFFFFF;
			border-top: 2rpx solid #D7DBE1;
		}
	}
</style>